<template>
  <view class="">
    <view class="status-bar"></view>
    <uni-nav-bar
      dark
      :fixed="true"
      shadow
      background-color="#000"
      status-bar
      left-icon="left"
      left-text="返回"
      :title="title"
      @clickLeft="back"
    />
    <view class="modify-item-box">
      <view v-if="item === 'username'">
        <view class="item-text">{{ label }}: </view>
        <view class="item-field">
          <input
            class="item-input"
            type="text"
            :placeholder="placeholder"
            v-model="username"
            maxlength="20"
          />
          <uni-icons
            class="item-icon"
            type="clear"
            size="20"
            color="#cecece"
            @click="nickname = ''"
          />
        </view>
        <view class="item-text"> {{ username.length }}/20 </view>
      </view>

      <view v-if="item === 'douyin_id'">
        <view class="item-text">{{ label }}:</view>
        <view class="item-field">
          <input
            class="item-input"
            type="text"
            :placeholder="placeholder"
            v-model="douyin_id"
            maxlength="16"
          />
          <uni-icons
            class="item-icon"
            type="close"
            size="20"
            color="#cecece"
            @click="douyin_id = ''"
          />
        </view>
        <view class="item-text"> {{ notice }} </view>
      </view>
      <view>
        <button type="primary" size="large" @click="save" style="">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
  import { editProfilePage } from "@/API/pageConst";

  export default {
    name: "ModifyItem",
    data() {
      return {
        title: "",
        username: "",
        label: "",
        placeholder: "",
        notice: "",
        item: "",
        douyin_id: "",
      };
    },
    onLoad(option) {
      this.item = option.item;
      if (this.item === "username") {
        this.username = option.username;
        this.title = "修改昵称";
        this.label = "我的昵称";
        this.placeholder = "请输入昵称";
      } else if (this.item === "douyin_id") {
        this.douyin_id = option.douyin_id;
        this.title = "修改抖音号";
        this.label = "我的抖音号";
        this.placeholder = "请输入抖音号";
        this.notice =
          "最多16个字,只允许包含字母、数字、下划线和点,30天内仅能修改一次";
      }
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1,
        });
      },
      save() {
        if (this.item === "username") {
          uni.setStorageSync("username", this.username);
          uni.showToast({
            title: "修改成功",
            icon: "success",
            duration: 1000,
          });
          uni.navigateTo({
            url: editProfilePage,
          });
          // uni.navigateBack({
          //   delta: 1,
          // });
        } else if (this.item === "douyin_id") {
          uni.setStorageSync("douyin_id", this.douyin_id);
          uni.showToast({
            title: "修改成功",
            icon: "success",
            duration: 1000,
          });
          uni.navigateTo({
            url: editProfilePage,
          });
          // uni.navigateBack({
          //   delta: 1,
          // });
        }
      },
    },
  };
</script>

<style scoped>
  .modify-item-box {
    height: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 8px 16px;
  }
  .item-text {
    margin: 6px auto;
  }
  .item-field {
    margin: 6px auto;
    border: 1px solid #8f8f8f;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* #ifdef H5 */
  .item-field:has(.item-input:focus) {
    border-color: #1890ff;
  }
  /* #endif */
  /* .item-input:focus {
    outline: none;
    border-color: #1890ff;
  } */
  .item-input {
    padding: 6px 8px;
    flex: 1;
  }
  .item-icon {
    padding-right: 6px;
    color: #cecece;
  }
</style>
